import React from 'react'
import { Icon, Button } from 'antd-mobile'
import './index.less'
/**
 *  <SmsPassword title="验证短信密码" isShow={this.state.isShow} />
 * */
// ========================================
class SmsPassword extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            isShow: 'none'
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            isShow: nextProps.isShow
        });
    }
    closeFun = () => {
        this.setState({
            isShow: 'none'
        });
    };
    jumpToPwdKey = () => {
    	let backAction = this.props.nextAction || '';
	  	if(backAction){
	  		backAction();
	  		return false;
	  	}
    };
    btnClickFun = () => {
        // console.log('获取验证码.....', this.props.phone);
        this.props.getCodeFun();
    };
    render() {
        let smsWidth = window.screen.width;
        let smsHeight = window.screen.height;
        let that = this;
        return (
            <div id="smsPassword" style={{ width: smsWidth, height: smsHeight, display: this.state.isShow }}>
                <div className="smsPassword-shadow"></div>
                <div className="smsPassword-content">
                    <div className="smsPassword-title">
                        {this.props.title}
                        <Icon type="cross" className="smsPassword-times" onClick={this.closeFun} />
                    </div>
                    <div className="smsPassword-notice">
                        短信密码已发送至您<span>{this.props.phone}</span>手机，5分钟内有效
                    </div>
                    <div className="smsPassword-getMsg">
                        <input type="number" placeholder="123456"/>
                        <Button type="primary" inline className="smsPassword-getMsg-btn" onClick={this.btnClickFun}>获取验证码</Button>
                    </div>
                    <div className="smsPassword-number">密码核对序号：<span>48</span></div>

                    <div className="btnGroup-one" style={{position: 'absolute', bottom: '60px', left: 0}}>
					    <Button type="primary" className="btnGroup-one-btn"  onClick={this.jumpToPwdKey.bind(this)}>下一步</Button>
					</div>
                </div>
            </div>
        );
    }
}
// ========================================
export default SmsPassword;